import meals from '@/assets/json/meals.json';
<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside
      width="230px"
      style="
        background-color: rgb(255, 255, 255);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      "
    >
      <el-menu>
        <!-- 添加一个菜单项用于返回主页 -->
        <el-menu-item index="home">
          
            <i class="el-icon-s-home" @click="returnToHome"></i>
        
        </el-menu-item>
        <el-divider></el-divider>
        <el-submenu index="1">
          <template slot="title"
            ><router-link :to="{name:'order',query:{
              loginUserId:this.userId
            }}"
              ><i class="el-icon-potato-strips"></i></router-link
            >套餐</template
          >
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"
            ><router-link :to="{name:'drinks',query:{
              loginUserId:this.userId
            }}"
              ><i class="el-icon-milk-tea"></i></router-link
            >饮料</template
          >
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <router-link :to="{name:'cart',query:{
              loginUserId:this.userId
            }}">
            <i class="el-icon-shopping-cart-2"></i>
           
             
            </router-link>
            购物车 
            <el-badge v-show="this.$store.state.cart.length>0" :value="this.$store.state.cart.length" class="item">
            </el-badge>
          </template>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <router-link :to="{name:'record',query:{
              loginUserId:this.userId
            }}"> <i class="el-icon-shopping-cart-2"></i>
            </router-link>
             
            购买记录
          </template>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- <el-header style="text-align: right; font-size: 12px"> 
        <el-row>
            <el-col :span="12"><router-link to="/about"><i class="el-icon-house" style="margin-right: 500px"></i></router-link><div class="grid-content ">
              </div></el-col>
            <el-col :span="12"><div class="grid-content "><el-dropdown>
          <i class="el-icon-user" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>个人中心</span></div></el-col>
</el-row>
        
      </el-header> -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.price {
  color: #ff6700; /* 例如，将文本颜色设置为橙色 */ /* 加粗文本 */
  font-size: 1.2em; /* 增大字号 */
  margin-left: 10px; /* 与前面内容的间隔 */

  /* 添加其他您想要的样式 */
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  align-items: stretch;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/* 以上是分栏的css */
.el-header {
  background-color: #ffbc0d;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #ffffff;
}
.image {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>
<script>
const mealsUrl = "/assets/json/meals.json";

export default {
  
  data() {
    return {
      currentDate: new Date().toLocaleDateString(),
      meals: [],
      userId:0,
    };
  },
  created() {
    fetch(mealsUrl)
      .then((response) => response.json())
      .then((data) => {
        this.meals = data.meals;
      })
      .catch((error) => {
        console.error("Error fetching meals:", error);
      });
  },
  computed: {
    // 计算应该渲染多少行，每行 4 个卡片
    rows() {
      return this.meals.reduce((rows, meal, index) => {
        if (index % 4 === 0) {
          rows.push([]);
        }
        rows[rows.length - 1].push(meal);
        return rows;
      }, []);
    },
  },
  methods:{
    returnToHome:function(){
      if(this.userId==null){
        this.$router.push({
                path: '/loginPage',
              })}
              else{this.$router.push({
                path:'/serviceindex',
                query:{
                  loginUserId:this.userId
                }
              })}

    },
    goToDrinks:function(){
      this.$router.push({
        query:{
          loginUserId:this.userId
        }
      })
    },
    goToRecord:function(){
      this.$route.push({
        query:{
          loginUserId:this.userId
        }
      })
    }
  },
  mounted(){
    this.userId=this.$route.query.loginUserId
  }
 
  
};

</script>